<template>
    <el-form class="headform" label-position="right" :inline="true" v-model="searchForm" label-width="auto">
        <el-row>
            <el-col :span="8">
                <el-form-item label="合同号">
                    <el-input v-model="searchForm.contractNo" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="客户名称">
                    <el-select v-model="searchForm.customerName" filterable remote reserve-keyword placeholder="请选择"
                        :remote-method="searchCustomer" :loading="loading" clearable>
                        <el-option v-for="item in customerNameOptions" :key="item.id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" clearable>
                        <el-option label="待开票" value="待开票"></el-option>
                        <el-option label="已开票" value="已开票"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="申请部门">
                    <!-- <el-input v-model="searchForm.applicationDepartment" clearable></el-input> -->
                    <el-select v-model="searchForm.applicationDepartment" placeholder="请选择" :loading="loading"
                        clearable>
                        <el-option label="企业管理部" value="企业管理部" />
                        <el-option label="设备部" value="设备部" />
                        <el-option label="生产部" value="生产部" />
                        <el-option label="采购运营中心" value="采购运营中心" />
                        <el-option label="质量控制部" value="质量控制部" />
                        <el-option label="工程研发部" value="工程研发部" />
                        <el-option label="行政部" value="行政部" />
                        <el-option label="安全环保部" value="安全环保部" />
                        <el-option label="人力资源部" value="人力资源部" />
                        <el-option label="综合部" value="综合部" />
                        <el-option label="财务部" value="财务部" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="发票类别">
                    <el-select v-model="searchForm.type" clearable>
                        <el-option v-for="item in typeOptions" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" class="button">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="domestic">内销新建</el-button>
                <el-button type="primary" @click="Export">外销新建</el-button>
                <el-button type="primary" @click="exportList">导出</el-button>
            </el-col>
        </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%;" ref="table" @selection-change="handleSelectionChange"
        table-layout="auto" row-key="getRowKeys">
        <el-table-column prop="numberNo" label="开票申请号" align="center"></el-table-column>
        <el-table-column prop="contractNo" label="合同号" align="center"></el-table-column>
        <el-table-column prop="type" label="发票类别" align="center">
            <template #default="scope">
                <span v-if="scope.row.type == '内销-增值税专用发票'">专票</span>
                <span v-if="scope.row.type == '内销-增值税普通发票'">普票</span>
                <span v-if="scope.row.type != '内销-增值税普通发票' && scope.row.type != '内销-增值税专用发票'">形式</span>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column prop="invoiceRatio" label="比例" align="center">
            <template #default="scope">
                <span v-if="scope.row.invoiceRatio != '' && scope.row.invoiceRatio != null">{{ scope.row.invoiceRatio
                    }}% </span>
            </template>
        </el-table-column>
        <el-table-column prop="applicationDepartment" label="申请部门" align="center"></el-table-column>
        <el-table-column prop="applyPerson" label="申请人" align="center"></el-table-column>
        <el-table-column prop="customerNameEasy" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="applyTime" label="次数" align="center">
            <template #default="scope">
                {{ scope.row.printNumber + scope.row.downNumber }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row)" link size="small">查看</el-button>
                <el-button type="primary" @click="edit(scope.row)" link size="small">修改</el-button>
                <el-button type="primary" @click="print(scope.row)" link size="small"
                    v-if="scope.row.status == '已开票' && scope.row.type != '内销-增值税普通发票' && scope.row.type != '内销-增值税专用发票'">打印</el-button>
                <el-button type="primary" @click="download(scope.row)" link size="small"
                    v-if="scope.row.status == '已开票'">下载</el-button>
                <el-button type="primary" @click="repeat(scope.row)" link size="small"
                    v-if="scope.row.status != '草稿'">复用</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15]"
        :small="small" :disabled="disabled" :background="background" layout="total, prev, pager, next, sizes, jumper"
        :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { useRouter } from "vue-router";
import { qdList, findAllByName, exportLists } from '@/utils/invoice';
import { useStore } from '@/stores/counter'
const use_store = useStore()
const router = useRouter();
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const totalPage = ref(0)
const user = JSON.parse(localStorage.getItem("user"))
const searchForm = ref({
    applicationDepartment: user.department == '财务部' ? '' : user.department,
    contractNo: '',
    customerName: '',
    status: '',
    type: ''
})

const customerNameOptions = ref([])

const typeOptions = [
    {
        label: '专用发票',
        value: '专用发票'
    },
    {
        label: '普通发票',
        value: '普通发票'
    },
    {
        label: '统',
        value: '统'
    },
    {
        label: '自',
        value: '自'
    },
    {
        label: 'BSL',
        value: 'BSL'
    },
    {
        label: '零部件',
        value: '零部件'
    },
]
const tableData = ref([])

onMounted(() => {
    search()
})

function search() {
    qdList(searchForm.value, currentPage4.value, pageSize4.value).then(res => {
        tableData.value = res.data.records
        totalPage.value = res.data.total
    })
}

function print(row) {
    use_store.id = row.id
    use_store.operation = 6
    use_store.path = 'list'
    if (row.type == '外销-形式发票-零部件') {
        use_store.status = 4;
        if (row.lingbujianCommodityList.length > 4) {
            router.push({
                path: 'printDoubleInvoice'
            })
        } else {
            router.push({
                path: 'printInvoice'
            })
        }
    } else if (row.type == '外销-形式发票-干箱-自接') {
        use_store.status = 1;
        if (row.ganxiangCommodityList.length > 4) {
            router.push({
                path: 'printDoubleInvoice'
            })
        } else {
            router.push({
                path: 'printInvoice'
            })
        }
    } else if (row.type == '外销-形式发票-干箱-BSL') {
        use_store.status = 3;
        if (row.ganxiangCommodityList.length > 4) {
            router.push({
                path: 'printDoubleInvoice'
            })
        } else {
            router.push({
                path: 'printInvoice'
            })
        }
    } else if (row.type == '外销-形式发票-干箱-统接') {
        use_store.status = 2;
        if (row.ganxiangCommodityList.length > 4) {
            router.push({
                path: 'dryBoxPrintDoubleInvoice'
            })
        } else {
            router.push({
                path: 'dryBoxPrintInvoice'
            })
        }
    }
}

function searchCustomer(params) {
    findAllByName({ name: params }).then(res => {
        customerNameOptions.value = res.data
    })
}

function handleSizeChange() {
    search()
}

function handleCurrentChange() {
    search()
}

function download(row) {
    if (row.type == '内销-增值税普通发票' || row.type == '内销-增值税专用发票') {
        window.location.href = `/api/files/${row.file}`
    } else {
        use_store.id = row.id
        use_store.operation = 7
        use_store.path = 'list'
        if (row.type == '外销-形式发票-零部件') {
            use_store.status = 4;
            if (row.lingbujianCommodityList.length > 4) {
                router.push({
                    path: 'printDoubleInvoice'
                })
            } else {
                router.push({
                    path: 'printInvoice'
                })
            }
        } else if (row.type == '外销-形式发票-干箱-自接') {
            use_store.status = 1;
            if (row.ganxiangCommodityList.length > 4) {
                router.push({
                    path: 'printDoubleInvoice'
                })
            } else {
                router.push({
                    path: 'printInvoice'
                })
            }
        } else if (row.type == '外销-形式发票-干箱-BSL') {
            use_store.status = 3;
            if (row.ganxiangCommodityList.length > 4) {
                router.push({
                    path: 'printDoubleInvoice'
                })
            } else {
                router.push({
                    path: 'printInvoice'
                })
            }
        } else if (row.type == '外销-形式发票-干箱-统接') {
            use_store.status = 2;
            if (row.ganxiangCommodityList.length > 4) {
                router.push({
                    path: 'dryBoxPrintDoubleInvoice'
                })
            } else {
                router.push({
                    path: 'dryBoxPrintInvoice'
                })
            }
        }
    }
}

function repeat(row) {
    use_store.operation = 4
    use_store.id = row.id
    use_store.path = 'list'
    if (row.type.indexOf("内销") >= 0) {
        router.push({
            path: '/newDomestic'
        })
    } else {
        use_store.name = row.type
        router.push({
            path: '/Export'
        })
    }
}

function view(row) {
    use_store.operation = 1
    use_store.id = row.id
    use_store.path = 'list'
    if (row.type.indexOf("内销") >= 0) {
        router.push({
            path: '/newDomestic'
        })
    } else {
        use_store.name = row.type
        router.push({
            path: '/Export'
        })
    }
}

function edit(row) {
    use_store.id = row.id
    use_store.operation = 2
    use_store.path = 'list'
    if (row.type.indexOf("内销") >= 0) {
        router.push({
            path: '/newDomestic'
        })
    } else {
        use_store.name = row.type
        router.push({
            path: '/Export'
        })
    }
}

function domestic() {
    use_store.operation = 3
    use_store.path = 'list'
    router.push({
        path: '/newDomestic'
    })
}

function Export() {
    use_store.operation = 3
    use_store.path = 'list'
    router.push({
        path: '/Export'
    })
}

function exportList() {
    exportLists(searchForm.value, currentPage4.value, pageSize4.value).then(data => {
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
        const date = new Date().toLocaleDateString()
        const link = document.createElement('a')
        link.href = url
        let attributeValue = `申请清单${date}-报表记录.xlsx`
        link.setAttribute('download', attributeValue)
        document.body.appendChild(link)
        link.click()
        link.remove()
    })
}
</script>
<style lang="scss">
.el-col {
    padding-right: 20px;

    .el-form-item {
        width: 100%;
        margin-right: 20px;
    }
}

.button {
    padding-left: 25px;
}

.el-pagination {
    margin-top: 10px;
    float: right;
}
</style>